<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 590px;
            height: 470px;
            border: 1px solid #000;
            margin: 50px auto;
            overflow: hidden;
            position: relative;
        }
        ul{
            list-style: none;
            position: absolute;
            top: 0px;
        }
        li{
            width: 590px;
            height: 470px;
      }
    </style>
</head>
<body>
<div class="box">
    <ul>
        <li><img src="img/1.jpg" alt=""></li>
        <li><img src="img/2.jpg" alt=""></li>
        <li><img src="img/3.jpg" alt=""></li>
        <li><img src="img/4.jpg" alt=""></li>
        <li><img src="img/1.jpg" alt=""></li>
    </ul>
</div>
</body>
</html>
<script>
    var ul=document.querySelector("ul");
    var lis=document.querySelector("ul li");
    var index=0;
    setInterval(function () {
        index-=5;
      if(index<-470*4){
          index=0;
      }
        ul.style.top=index+"px";
    },30)

</script>